<template>
  <div v-title data-title="iWMS-工作台终端" class="home_index">
    <el-container>
      <el-header class="el_main_header">
        <el-row>
          <el-col :span="21" class="span_class">
            <span>
              {{ nowTime }} 您好，<span style="font-size: 3.5vh">{{
                UserInfo.UserId
              }}</span>
              ! 当前<span style="color: red; font-size: 3vh">{{
                UserInfo.WbInfo.WbId
              }}</span
              >工作台类型是:</span
            >
            <el-select
              v-model="UserInfo.WbInfo.WbType"
              placeholder="请选择"
              @change="changeWorkStation"
            >
              <el-option
                v-for="item in WbIdTypeInfo"
                :key="item.WbType"
                :label="item.WbTypeName"
                :value="item.WbType"
              >
              </el-option>
            </el-select>
            <el-button
              style="
                margin-left: 2vh;
                color: #5500ff;
                background: rgba(0, 0, 0, 0);
                border: none;
              "
              @click="clickLink('Logout')"
            >
              退出</el-button
            >
          </el-col>
        </el-row>
      </el-header>
      <el-main class="el_main_modify">
        <el-row class="el_row_modify">
          <el-col :span="2">
            <el-card
              class="box-card_index"
              :style="'background-color:' + color()"
              shadow="hover"
            >
              <div>上架</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card
              class="box-card_index"
              :style="'background-color:' + color()"
              shadow="hover"
              v-show="false"
            >
              <div @click="clickLink('WarehousingList')">上架列表</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card
              class="box-card_index"
              :style="'background-color:' + color()"
              shadow="hover"
            >
              <div @click="clickLink('WarehousingOPT')">上架工作台</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card
              class="box-card_index"
              :style="'background-color:' + color()"
              shadow="hover"
              v-show="false"
            >
              <div @click="clickLink('ReplenishmentOPT')">补货工作台</div>
            </el-card>
          </el-col>
        </el-row>
        <!-- 拣货 -->
        <el-row class="el_row_modify">
          <el-col :span="2">
            <el-card
              class="box-card_index"
              :style="'background-color:' + color()"
              shadow="hover"
            >
              <div>拣货</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card
              class="box-card_index"
              :style="'background-color:' + color()"
              shadow="hover"
            >
              <div @click="clickLink('PickingOPT_Emergent')">紧急要料台</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card
              class="box-card_index"
              :style="'background-color:' + color()"
              shadow="hover"
            >
              <div @click="clickLink('PickingOPT')">拣货工作台</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card
              class="box-card_index"
              :style="'background-color:' + color()"
              shadow="hover"
            >
              <div @click="clickLink('OtherPickingOPT')">SPS拣货任务</div>
            </el-card>
          </el-col>
        </el-row>
        <!-- 库内 -->
        <el-row class="el_row_modify">
          <el-col :span="2">
            <el-card
              class="box-card_index"
              :style="'background-color:' + color()"
              shadow="hover"
            >
              <div>库内</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card
              class="box-card_index"
              :style="'background-color:' + color()"
              shadow="hover"
              v-show="false"
            >
              <div @click="clickLink('InventoryList')">盘点列表</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card
              class="box-card_index"
              :style="'background-color:' + color()"
              shadow="hover"
            >
              <div @click="clickLink('InventoryOPT')">盘点工作台</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card
              class="box-card_index"
              :style="'background-color:' + color()"
              shadow="hover"
            >
              <div @click="clickLink('TallyOPT')">理货工作台</div>
            </el-card>
          </el-col>
        </el-row>
        <!-- 报表 -->
        <el-row class="el_row_modify">
          <el-col :span="2">
            <el-card
              class="box-card_index"
              :style="'background-color:' + color()"
              shadow="hover"
            >
              <div>报表</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card
              class="box-card_index"
              :style="'background-color:' + color()"
              shadow="hover"
              v-show="false"
            >
              <div @click="clickLink('StockList')">库存查询</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card
              class="box-card_index"
              :style="'background-color:' + color()"
              shadow="hover"
            >
              <div @click="clickLink('RetrieveBox')">呼叫料箱</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card
              class="box-card_index"
              :style="'background-color:' + color()"
              shadow="hover"
              @click="clickLink('ConsolidationOPT')"
              v-show="false"
            >
              <div @click="clickLink('ConsolidationOPT')">合单工作台</div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>
        <el-row>
          <el-col :span="24" class="el-footer_class">
            <span
              >系统版本:V0.2.130 ©2021-{{ Year }} 版权所有
              浙江国自机器人技术股份有限公司
            </span>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import {
  POSTLocationInfol,
  getWorkStation
} from "@/api/api";

export default {
  name: 'Home',
  data () {
    return {
      activeIndex: '1',
      Width: 0,
      Height: 0,
      searchVal: [],
      nowTime: '',
      time: null,
      MenuInfo: {
        WarehousingList: '',
        WarehousingOPT: 'WarehousingOPT_WC',
        ReplenishmentOPT: 'ReplenishmentOPT',
        PickingOPT_Emergent: 'PickingOPT_Emergent',
        PickingOPT: 'PickingOPT',
        OtherPickingOPT: "LinePatrolPickingOPT",
        InventoryList: '',
        InventoryOPT: 'InventoryOPT',
        ConsolidationOPT: '',
        StockList: '',
        RetrieveBox: 'RetrieveBox',
        TallyOPT: 'TallyOpt',
        Logout: 'Login'
      },
      WbIdTypeInfo: [],
      UserInfo: {
        UserId: '',
        WbId: '',
        WbInfo: {
          WbName: '',
          WbType: ''
        }
      },
      Year: ""
    }
  },
  mounted () {
    this.UserInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.GetdivSize()
    this.WbIdTypeInfo = [{ WbTypeName: '拣货', WbType: 'OUT' }, { WbTypeName: '入库', WbType: 'IN' }, { WbTypeName: "盘点", WbType: 'INVENTORY' }, { WbTypeName: "理货", WbType: 'TAY' }]
    if (sessionStorage.getItem('SwitchFlag')) {
      this.$message({
        message: "已切换" + this.UserInfo.WbInfo.WbName,
        type: 'success',
        offset: 200
      })
      sessionStorage.removeItem('SwitchFlag')
    } else {
      this.$message({
        message: "当前工作台" + this.UserInfo.WbInfo.WbName,
        type: 'success',
        offset: 200
      })
    }
    // this.getSOWLocationId()
    var date = new Date();
    this.Year = date.getFullYear()
  },
  methods: {
    getNowDate () {
      var date = new Date();
      var sign2 = ":";
      var year = date.getFullYear() // 年
      var month = date.getMonth() + 1; // 月
      var day = date.getDate(); // 日
      var hour = date.getHours(); // 时
      var minutes = date.getMinutes(); // 分
      var seconds = date.getSeconds() //秒
      var str = ''
      var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
      if (hour > 12) {
        hour -= 12;
        str = " PM";
      } else {
        str = " AM";
      }
      var week = weekArr[date.getDay() - 1];
      // 给一位数的数据前面加 “0”
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }

      this.nowTime = year + "年" + month + "月" + day + "日  " + str + '  ' + week;
    },
    color () {
      var color_list = ['#8BBA30', '#BEA881', '#04ACAD', '#EBB741', '#F2854C', '#385E82']
      return color_list[parseInt((Math.random() * color_list.length).toString())]
    },
    clickLink (value) {
      if (this.MenuInfo[value] != '') {
        this.$router.push(`/${this.MenuInfo[value]}`)
      } else {
        this.$message({
          message: '功能开发中.....',
          type: 'info'
        });
      }
    },
    GetdivSize () {
      this.Width = document.body.clientWidth;
      this.Height = document.body.clientHeight;
      this.searchVal = [this.Width, this.Height]
    },
    getSOWLocationId () {
      const params = {
        UserId: this.UserInfo.UserId,
        WbId: this.UserInfo.WbId,
        time: Date.parse(new Date())
      }
      POSTLocationInfo(params).then(res => {
        if (res.data.code === 0 && res.data.data.length >= 1) {
          sessionStorage.removeItem('SOWLocationId')
          sessionStorage.setItem('SOWLocationId', JSON.stringify(res.data.data))
        } else {
          this.$message({
            message: '登录工作台无播种库位',
            type: 'info'
          });
        }
      })
    },
    changeWorkStation (event) {
      this.$confirm('请确认是否切换工作台, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          UserId: this.UserInfo.UserId,
          WbId: this.UserInfo.WbInfo.WbId,
          ChangeType: event,
          time: Date.parse(new Date())
        }
        getWorkStation(params).then(res => {
          const data = res.data.data
          if (res.data.code == 0) {
            this.UserInfo.WbInfo.WbType = event
            sessionStorage.removeItem('userInfo')
            sessionStorage.setItem('userInfo', JSON.stringify(this.UserInfo))
            sessionStorage.removeItem('SwitchFlag')
            sessionStorage.setItem('SwitchFlag', true)
            this.$message({
              message: "工作台切换成功，请等待页面刷新",
              type: 'success',
              offset: 200
            })
            setTimeout(() => {
              this.$router.go(0)
            }, 1300)
          } else {
            this.$message({
              message: res.data.message,
              type: 'error',
              offset: 200
            })
            setTimeout(() => {
              this.$router.go(0)
            }, 1300)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消切换'
        });
        setTimeout(() => {
          this.$router.go(0)
        }, 1300)
      });
    }
  },
  created () {
    this.getNowDate();
    // areaInfo().then(res => {
    //   const result = res.data
    //   if (result.code === 0) {
    //     this.areaInfo = result.data
    //   } else {
    //     this.$message({
    //       message: result.message,
    //       type: 'warning',
    //       offset: 200
    //     })
    //   }
    // })
  }
}
</script>
<style lang="scss">
.home_index {
  width: 100%;
  height: 100%;
  background: url("../assets/bg1.png") !important;
  background-size: 100% 100%;
}

.el_main_header {
  margin-top: 2vh;
}

.el-footer_class {
  margin-top: 2vh;
  font-size: 2vh;
}

.span_class {
  color: black;
  font-size: 2vh;
  text-align: right;
  align-items: center;

  .el-button {
    font-size: 2vh;
  }
}

.el_main_modify {
  margin-left: 12vw;
}

.box-card_index {
  height: 15vh;
  width: 98%;
  border: -2px;
  border-color: #cccccc;
  margin: 4px;
  border-radius: 10px;

  div {
    text-align: center;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 3vh;
    color: #ffffff;
  }
}

.box-card_index:hover {
  background-color: floralwhite !important;

  div {
    color: #000000;
  }
}
</style>